<template>
  <div>
    <!-- <my-goods title="广西螺蛳粉" /> -->
    <!-- 上面这个代表写死了传递的数据，下面这个代表没写死，根据数组的下标0的元素来 -->
    <!-- 下标0的元素是什么它就是什么 -->
    <!-- <my-goods
      v-bind:title="list[0].name"
      :price="list[0].price"
      :desc="list[0].desc"
    />
    <my-goods
      :title="list[1].name"
      :price="list[1].price"
      :desc="list[1].desc"
    />
    <my-goods
      :title="list[2].name"
      :price="list[2].price"
      :desc="list[2].desc"
    /> -->

    <my-goods
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :price="item.price"
      :desc="item.desc"
    />
  </div>
</template>

<script>
import MyGoods from './components/MyGoods.vue'
export default {
  components: {
    MyGoods
  },
  data () {
    return {
      list: [
        { id: 1, name: '广西螺蛳粉', price: 15, desc: '广西老表额，爱吃额' },
        { id: 2, name: '长沙臭豆腐', price: 10, desc: '闻起来臭，吃起来更臭' },
        {
          id: 3,
          name: '泰国咖喱',
          price: 999,
          desc: '萨瓦迪卡，喝完咖喱，噶腰子'
        }
      ]
    }
  }
}
</script>

<style></style>
